<template>
    <div>
        <label for="ipt1">表单的双向绑定v-model写法</label>
        <input id="ipt1" type="text" v-model="msg">
        <br />
        <label for="ipt2">表单的双向绑定@input写法</label>
        <input id="ipt2" type="text" @input="msg = $event.target.value" :value="msg">
        <h2>{{ msg }}</h2>
        <!-- 组件中定义v-model -->
        <HyInput v-model="msg"></HyInput>
        <!-- <HyInput :modelValue="msg" @update:model-value="msg = $event"></HyInput> -->
    </div>
</template>

<script>
import HyInput from './HyInput.vue'
export default {
    components: { HyInput },
    data() {
        return {
            msg: "Hello World"
        }
    },

}
</script>

<style lang="scss" scoped>
</style>